<template>
  <view class="page-container">
    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 状态栏占位符 -->
      <view class="status-bar" />
      <!-- 醒目的标题 -->
      <view class="template-title-container">
        <text class="template-name">Day.js 示例</text>
        <view class="title-underline" />
      </view>

      <!-- 示例内容区域 -->
      <view class="content-section">
        <view class="section">
          <view class="subtitle">1. 日期格式化</view>
          <view class="example">
            <view class="example-title">当前时间：</view>
            <view class="example-content">默认格式：{{ currentTime }}</view>
            <view class="example-content">自定义格式：{{ customFormatTime }}</view>
          </view>
        </view>

        <view class="section">
          <view class="subtitle">2. 相对时间</view>
          <view class="example">
            <view class="example-title">相对时间示例：</view>
            <view class="example-content">昨天：{{ relativeTime.yesterday }}</view>
            <view class="example-content">明天：{{ relativeTime.tomorrow }}</view>
            <view class="example-content">一周前：{{ relativeTime.weekAgo }}</view>
          </view>
        </view>

        <view class="section">
          <view class="subtitle">3. 日期判断</view>
          <view class="example">
            <view class="example-title">日期判断示例：</view>
            <view class="example-content">今天：{{ isToday ? '是' : '否' }}</view>
            <view class="example-content">昨天：{{ isYesterday ? '是' : '否' }}</view>
            <view class="example-content">明天：{{ isTomorrow ? '是' : '否' }}</view>
            <view class="example-content">周末：{{ isWeekend ? '是' : '否' }}</view>
          </view>
        </view>

        <view class="section">
          <view class="subtitle">4. 日期计算</view>
          <view class="example">
            <view class="example-title">日期计算示例：</view>
            <view class="example-content">本月天数：{{ daysInMonth }}</view>
            <view class="example-content">今天是星期：{{ dayOfWeek }}</view>
            <view class="example-content">当前季度：{{ quarter }}</view>
            <view class="example-content">当前周数：{{ week }}</view>
          </view>
        </view>

        <view class="section">
          <view class="subtitle">5. 日期操作</view>
          <view class="example">
            <view class="example-title">日期操作示例：</view>
            <view class="example-content">明天：{{ tomorrow }}</view>
            <view class="example-content">昨天：{{ yesterday }}</view>
            <view class="example-content">本月第一天：{{ monthStart }}</view>
            <view class="example-content">本月最后一天：{{ monthEnd }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部装饰 -->
    <view class="footer-decoration">
      <view class="deco-shape-1" />
      <view class="deco-shape-2" />
    </view>
  </view>
</template>

<script>
import { $day } from '@/utils'

export default {
  data() {
    return {
      currentTime: '',
      customFormatTime: '',
      relativeTime: {
        yesterday: '',
        tomorrow: '',
        weekAgo: '',
      },
      isToday: false,
      isYesterday: false,
      isTomorrow: false,
      isWeekend: false,
      daysInMonth: 0,
      dayOfWeek: '',
      quarter: 0,
      week: 0,
      tomorrow: '',
      yesterday: '',
      monthStart: '',
      monthEnd: '',
    }
  },
  created() {
    // 更新时间
    this.updateTime()
    setInterval(this.updateTime, 1000)

    // 设置相对时间示例
    const now = new Date()
    this.relativeTime.yesterday = $day.fromNow($day.subtract(now, 1, 'day'))
    this.relativeTime.tomorrow = $day.fromNow($day.add(now, 1, 'day'))
    this.relativeTime.weekAgo = $day.fromNow($day.subtract(now, 7, 'day'))

    // 设置日期判断示例
    this.isToday = $day.isToday(now)
    this.isYesterday = $day.isYesterday($day.subtract(now, 1, 'day'))
    this.isTomorrow = $day.isTomorrow($day.add(now, 1, 'day'))
    this.isWeekend = $day.isWeekend(now)

    // 设置日期计算示例
    this.daysInMonth = $day.getDaysInMonth(now)
    this.dayOfWeek = ['日', '一', '二', '三', '四', '五', '六'][$day.getDayOfWeek(now)]
    this.quarter = $day.getQuarter(now)
    this.week = $day.getWeek(now)

    // 设置日期操作示例
    this.tomorrow = $day.format($day.add(now, 1, 'day'))
    this.yesterday = $day.format($day.subtract(now, 1, 'day'))
    this.monthStart = $day.format($day.startOf(now, 'month'))
    this.monthEnd = $day.format($day.endOf(now, 'month'))
  },
  methods: {
    updateTime() {
      const now = new Date()
      this.currentTime = $day.format(now)
      this.customFormatTime = $day.format(now, 'YYYY年MM月DD日 HH:mm:ss')
    },
  },
}
</script>

<style lang="scss">
.page-container {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
  background-color: #000;

  // 青色光晕 (左上角)
  &::before {
    position: absolute;
    top: -300rpx;
    left: -300rpx;
    z-index: 0;
    width: 1000rpx;
    height: 1000rpx;
    pointer-events: none;
    content: '';
    background: radial-gradient(circle, rgba(0, 220, 255, 0.1) 0%, transparent 70%);
    filter: blur(120rpx);
  }

  // 品红色光晕 (右下角)
  &::after {
    position: absolute;
    right: -400rpx;
    bottom: -400rpx;
    z-index: 0;
    width: 1200rpx;
    height: 1200rpx;
    pointer-events: none;
    content: '';
    background: radial-gradient(circle, rgba(255, 42, 109, 0.08) 0%, transparent 70%);
    filter: blur(140rpx);
  }
}

.main-content {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 80rpx 40rpx;
}

.template-title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;

  .template-name {
    margin-bottom: 20rpx;
    font-size: 48rpx;
    font-weight: bold;
    color: #fff;
  }

  .title-underline {
    width: 100rpx;
    height: 4rpx;
    background-color: #fff;
    border-radius: 2rpx;
  }
}

.content-section {
  width: 100%;
  max-width: 750rpx;
  padding: 40rpx;
  margin-top: 40rpx;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  backdrop-filter: blur(10px);
}

.section {
  margin-bottom: 40rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.subtitle {
  margin-bottom: 20rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

.example {
  padding: 20rpx;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12rpx;

  .example-title {
    margin-bottom: 16rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #fff;
  }

  .example-content {
    margin-bottom: 12rpx;
    font-size: 28rpx;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.footer-decoration {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: 200rpx;
  overflow: hidden;

  .deco-shape-1 {
    position: absolute;
    bottom: -100rpx;
    left: 50%;
    width: 300rpx;
    height: 300rpx;
    background: radial-gradient(circle, rgba(0, 220, 255, 0.1) 0%, transparent 70%);
    filter: blur(80rpx);
    transform: translateX(-50%);
  }

  .deco-shape-2 {
    position: absolute;
    bottom: -150rpx;
    left: 30%;
    width: 200rpx;
    height: 200rpx;
    background: radial-gradient(circle, rgba(255, 42, 109, 0.08) 0%, transparent 70%);
    filter: blur(60rpx);
  }
}
</style>
